<template>

<div class="groupSigleBox">
	<div class="bgImg">
		<img :src="bgImg"/>
	</div>
	<div class="fixBtn">
		<div class="joinBtn">加入群聊</div>
	</div>
</div>

</template>
<script>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { inject } from 'vue';
import { useRoute } from 'vue-router';

export default {
  data() {
    return {
      bgImg: "",
      apiUrl: ""
    };
  },
  inject: ['config'], // 从父级注入 'config'
  methods: {
    getProduct() {
      const route = useRoute();
      let entId = route.query.ent_id;
      let name = route.query.kefu_name;
      let id = route.query.id;

      // 发送 GET 请求
      axios.get(`${this.apiUrl}/2/virtualProduct/${entId}/${name}?ent_id=${entId}&id=${id}`)
        .then(response => {
          let resp = response.data;
          if (resp.code !== 20000) {
            ElMessage.error(resp.msg);
          }
          if (resp.result && resp.result.is_active !== 1) {
            ElMessage.error("产品不存在");
          }
          this.bgImg = resp.result.group_avatar; // 更新响应式数据
        })
        .catch(error => {
          ElMessage.error(error.response ? error.response.data.message : error.message);
        });
    }
  },
  mounted() {
    this.apiUrl = this.config.apiUrl; // 从注入的config中获取apiUrl
    this.getProduct();
  }
}
</script>

<style>
.bgImg{
	width: 100%;
	display: flex;
	justify-content: center;
}
.bgImg img{
	max-width: 100%;
}
.fixBtn{
	position: fixed;
	bottom: 20px;
	left: 0;
	display: flex;
	justify-content: center;
	width: 100%;
}
.joinBtn {
    padding: 12px 50px;
    font-size: 16px;
    background: rgb(7, 193, 96);
    border-radius: 10px;
    color: #fff;
    display: block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
	width: 90%;
}
</style>